<template>
  <div class="calendar">
    <el-calendar>
    <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
    <template
      v-slot:dateCell="{date, data}">
      <cTab :dateList="dateList" :day="data.day"></cTab>
      <!-- <p :class="returnClass(data.day)">
        {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
      </p> -->
    </template>
  </el-calendar>
  </div>
</template>

<script>
import cTab from "./cTab.vue";
export default {
  data () {
    return {
      dateList: [
        {
          day: "2023-07-22",
          state: 'finish',
          list: [
            '07-22 看电影',
            '07-22 看电影',
            '07-22 看电影',
          ]
        },
        {
          day: "2023-07-23",
          state: 'finish',
          list: [
            '07-23 看电影',
            '07-23 看电影',
            '07-23 看电影',
          ]
        },      
        {
          day: "2023-07-24",
          state: 'unfinish',
          list: [
            '07-24 看电影',
            '07-24 看电影',
            '07-24 看电影',
          ]
        },        
        {
          day: "2023-07-25",
          state: 'unfinish',
          list: [
            '07-25 看电影',
            '07-25 看电影',
            '07-25 看电影',
          ]
        }
      ]
    }
  },
  components: {
    cTab
  },
  mounted() {

  },
  methods: {
    returnClass(date) {
      let arr = []
      this.dateList.forEach(item => {
        if (item.day === date) {
          arr.push(item.state,' dot')
        }
      })
      return arr

    },
  },
}

</script>
<style scoped lang='less'>
.dot {
  position: relative;
}
.dot:after {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
  right: 0;
  top: 0;
}
.finish:after {
  background-color: aquamarine;
}
.unfinish:after {
  background-color: red;
}

</style>